<div class="header">
  <nav class="navbar navbar-inverse">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-top">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        {{#link-to 'application' class='navbar-brand'}}<b>Ember</b> RC{{/link-to}}
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-top">
        <ul class="nav navbar-nav">
          <li>
            {{#link-to 'topics' (query-params page=1)}}社区{{/link-to}}
          </li>
          <li><a target="_blank" href="https://ruby-china.org/wiki">Wiki</a></li>
          <li><a target="_blank" href="https://ruby-china.org/jobs">招聘</a></li>
          <li><a target="_blank" href="https://ruby-china.org/twitter">推文</a></li>
          <li><a target="_blank" href="https://ruby-china.org/sites">酷站</a></li>
        </ul>

        {{#if auth.isLogin}}
          <ul class="nav user-bar navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">{{auth.username}} {{auth.persitToken}} <span class="caret"></span></a>
              <button class="navbar-toggle" type="button" data-toggle="dropdown" role="button" aria-expanded="false">
                <span class="sr-only">Toggle</span>
                <i class="fa fa-reorder"></i>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li>
                  <a href="#">我的主页</a>
                </li>
                <li>
                  <div class="divider"></div>
                </li>
                <li>
                  <a href="#">个人资料设置</a>
                </li>
                <li>
                  <a href="#" {{action 'hello'}}>记事本 [hello]</a>
                </li>
                <li>
                  <a href="#" {{action 'user'}}>我的收藏</a>
                </li>
                <li>
                  <div class="divider"></div>
                </li>
                <li>
                  <a rel="nofollow" href="#" {{action 'logout'}}>退出</a>
                </li>
              </ul>
            </li>
          </ul>
        {{else}}
          <ul class="nav navbar-nav navbar-right">
            <li class="nav-search hidden-xs">
              <a href='#' {{action 'toggleLogin'}}>登陆</a>


              <div class="popover bottom {{showLoginClass}}" id="login-form">
                <div class="arrow"></div>
                <h3 class="popover-title">登录框</h3>
                <div class="popover-content">
                  <form>
                    {{input name='username' value=username}}
                    {{input name='password' type='password' value=password}}
                    <br>
                    {{#if auth.isLogin}}
                      {{#if ajaxing}}
                        <button class="btn btn-primary" disabled="disabled">登出中</button>
                      {{else}}
                        <button class="btn btn-danger" {{action 'logout'}}>登出</button>
                      {{/if}}
                    {{else}}
                      {{#if ajaxing}}
                        <button class="btn btn-primary" disabled="disabled">登陆中</button>
                      {{else}}
                        <button class="btn btn-primary" {{action 'login'}}>登陆</button>
                      {{/if}}
                    {{/if}}
                  </form>
                </div>
              </div>


            </li>
          </ul>
        {{/if}}
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</div>
